import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

// import home from '../components/Home';
// import About from '../components/About';
// import User from '../components/User';

const home = () => import('../components/Home')
const HomeMessage = () => import('../components/HomeMessage')
const HomeNews = () => import('../components/HomeNews')

const About = () => import('../components/About')
const User = () => import('../components/User')

const Profile = () => import('../components/Profile')

const User2 = () => import('../components/User2')
const Profile2 = () => import('../components/Profile2')

//使用Router插件
Vue.use(Router)


//把routers抽离出来
const routes = [{
    path: '/',
    redirect: '/home'
  },

  {
    path: '/home',
    component: home,
    meta:{
      title:"首页"
    },
    children: [
      {
        path: '/',
        component: HomeNews,
        meta: {
          title:"首页的news"
        }
      },
      {
        path: 'news',
        component: HomeNews,
        meta: {
          title:"首页的news"
        }
      },
      {
        path: 'message',
        component: HomeMessage,
        meta: {
          title:"首页的message"
        }
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta:{
      title:"关于"
    },
  },
  {
    path: '/User/:userId',
    component: User
  },
  {
    path: '/Profile',
    component: Profile
  },
  // 这里路径少个斜杠纠结了我十分钟找不出来
  {
    path: '/User2/:user2Id',
    component: User2
  },
  {
    path: '/Profile2',
    component: Profile2
  },
]

//创建Router对象
const router = new Router({
  //配置路由和组件之间的映射关系
  //是应该写在这里的，但是为了清晰，可抽取到上方
  routes,
  mode: 'history'
})

router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  next()
})



//Router对象
export default router;
